<template>
	<view class="coupon-center">
		<!-- 顶部轮播图 -->
		<swiper class="banner-swiper" circular autoplay interval="3000" duration="500">
			<swiper-item v-for="(item, index) in banners" :key="index">
				<image :src="item.image" mode="aspectFill" class="banner-image"></image>
			</swiper-item>
		</swiper>
		
		<!-- 优惠券分类标签 -->
		<view class="coupon-tabs">
			<view 
				v-for="(tab, index) in tabs" 
				:key="index"
				:class="['tab-item', currentTab === index ? 'active' : '']"
				@tap="switchTab(index)"
			>
				{{tab.name}}
			</view>
		</view>
		
		<!-- 限时抢购区域 -->
		<view class="flash-sale" v-if="currentTab === 0">
			<view class="section-title">
				<text class="title-text">限时抢购</text>
				<view class="countdown">
					<text>距结束</text>
					<text class="time-block">{{countdown.hours}}</text>
					<text>:</text>
					<text class="time-block">{{countdown.minutes}}</text>
					<text>:</text>
					<text class="time-block">{{countdown.seconds}}</text>
				</view>
			</view>
			
			<scroll-view scroll-x class="flash-sale-scroll">
				<view class="flash-sale-list">
					<view class="flash-sale-item" v-for="(item, index) in flashSaleCoupons" :key="index">
						<view class="flash-sale-content">
							<view class="discount-info">
								<text class="discount-type">{{item.type === 1 ? '折扣券' : '满减券'}}</text>
								<view class="discount-value" v-if="item.type === 1">
									<text class="value">{{item.discount}}</text>
									<text class="unit">折</text>
								</view>
								<view class="discount-value" v-else>
									<text class="currency">满{{item.minAmount}}</text>
									<text class="value">减{{item.deductAmount}}</text>
								</view>
							</view>
							<view class="coupon-info">
								<text class="coupon-name">{{item.name}}</text>
								<text class="coupon-condition">{{item.condition}}</text>
								<text class="coupon-limit">限购{{item.limit}}张</text>
							</view>
							<!-- <view class="price-info">
								<text class="original-price">¥{{item.originalPrice}}</text>
								<text class="current-price">¥{{item.price}}</text>
							</view> -->
						</view>
						<button 
							class="buy-btn" 
							:class="{'sold-out': item.soldOut}"
							:disabled="item.isDisabled"
							:loading="item.isLoading" 
							@tap="handleFlashSale(item)"
						>
							{{item.buttonText}}
						</button>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 优惠券列表 -->
		<view class="coupon-list" v-if="currentTab === 1">
			<view class="coupon-item" v-for="(coupon, index) in normalCoupons" :key="index">
				<view class="coupon-left">
					<view class="coupon-type">{{coupon.type === 1 ? '折扣券' : '满减券'}}</view>
					<view class="coupon-value" v-if="coupon.type === 1">
						<text class="value">{{coupon.discount}}</text>
						<text class="unit">折</text>
					</view>
					<view class="discount-value" v-else>
						<text class="currency">满{{coupon.minAmount}}</text>
						<text class="value">减{{coupon.deductAmount}}</text>
					</view>
					<view class="coupon-condition">满{{coupon.minAmount}}元可用</view>
				</view>
				<view class="coupon-right">
					<view class="coupon-info">
						<text class="coupon-name">{{coupon.name}}</text>
						<text class="coupon-desc">{{coupon.description}}</text>
						<text class="coupon-time">有效期至：{{coupon.expireTime}}</text>
					</view>
					<view class="coupon-price">
						<!-- <text class="price">¥{{coupon.price}}</text> -->
						<button class="buy-btn" v-if="coupon.soldOut === false" @tap="handleBuyCoupon(coupon)">立即领取</button>
						<button class="sold-out-btn" v-else>已领取</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 我的优惠券 -->
		<view class="my-coupons" v-if="currentTab === 2">
			<view class="coupon-item" v-for="(coupon, index) in myCoupons" :key="index" :class="{'expired': coupon.status === 'expired'}">
				<view class="coupon-left">
					<view class="coupon-type">{{coupon.type === 1 ? '折扣券' : '满减券'}}</view>
					<view class="coupon-value" v-if="coupon.type === 1">
						<text class="value">{{coupon.discount}}</text>
						<text class="unit">折</text>
					</view>
					<view class="discount-value" v-else>
						<text class="currency">满{{coupon.minAmount}}</text>
						<text class="value">减{{coupon.deductAmount}}</text>
					</view>
					<view class="coupon-condition">满{{coupon.minAmount}}元可用</view>
				</view>
				<view class="coupon-right">
					<view class="coupon-info">
						<text class="coupon-name">{{coupon.name}}</text>
						<text class="coupon-desc">{{coupon.description}}</text>
						<text class="coupon-time">有效期至：{{coupon.expireTime}}</text>
					</view>
					<!-- 使用按钮 -->
					<view class="coupon-action" v-if="coupon.status === 0">
						<button class="use-btn" @tap="handleUseCoupon(coupon)">立即使用</button>
					</view>
					<!-- 已使用按钮 -->
					<view class="coupon-action" v-if="coupon.status === 1">
						<button class="used-btn">已使用</button>
					</view>
					<!-- 已过期按钮 -->
					<view class="coupon-action" v-if="coupon.status === 2">
						<button class="expired-btn">已过期</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 使用底部导航组件 -->
		<!-- <bottom-nav :nav-list="bottomNavList" @nav-change="handleNavChange"></bottom-nav> -->
	</view>
</template>

<script>
// 引入底部导航组件
	import BottomNav from '../../components/BottomNav/BottomNav.vue';
	import coupon from '../../api/coupon.js';
export default {
	components: {
				BottomNav
			},
	data() {
		return {
			flashSaleStatus: {}, // 用于存储每个优惠券的状态
			clickTimer: {}, // 用于存储每个优惠券的点击计时器
			debounceTime: 3000, // 防抖时间3秒
			isProcessing: false, // 全局处理状态
			currentTab: 0,
			tabs: [
				{ name: '限时抢购' },
				{ name: '优惠券' },
				{ name: '我的优惠券' }
			],
			// 轮播图数据
			banners: [
				{
					image: 'https://jf2411-dd.oss-cn-hangzhou.aliyuncs.com/youhuiquan03.jpg',
					link: ''
				},
				{
					image: 'https://jf2411-dd.oss-cn-hangzhou.aliyuncs.com/youhuiquan02.jpg',
					link: ''
				},
				{
					image: 'https://jf2411-dd.oss-cn-hangzhou.aliyuncs.com/youhuiquan01.jpg',
					link: ''
				}
			],
			// 倒计时数据
			countdown: {
				hours: '02',
				minutes: '30',
				seconds: '00'
			},
			// 限时抢购优惠券
			flashSaleCoupons: [],
			// 普通优惠券
			normalCoupons: [],
			// 我的优惠券
			myCoupons: [],
			// 底部导航数据
			// bottomNavList: [
			// 	{ text: '首页', path: '/pages/firstPage/firstPage' },
			// 	{ text: '优惠卷', path: '/pages/couponCenter/couponCenter' },
			// 	{ text: '订单', path: '/pages/userOrder/userOrder' },
			// 	{ text: '我的', path: '/pages/mySelf/mySelf' },
			// ],
		}
	},
	mounted() {
		// 初始化数据
		this.getFlashSaleCoupons();
		this.getNormalCoupons();
		this.getMyCoupons();
		// 启动倒计时
		this.updateCountdown();
	},
	methods: {
		//传天数通过当前时间计算
		formatDate(timeValue) {
			if (!timeValue) {
			return '无有效日期';
			}
			// 确保 timeValue 是数字
			const days = Number(timeValue);
			if (isNaN(days)) {
				return '无有效日期';
			}
			// 获取当前日期
			const currentDate = new Date();
			// 在当前日期基础上加上传入的天数
			const targetDate = new Date(currentDate);
			targetDate.setDate(currentDate.getDate() + days);
			return targetDate.toLocaleDateString();
		},
		// 切换标签
		handleUseCoupon(coupon) {
			if (coupon.status === 2) {
				uni.showToast({
					title: '优惠券已过期',
					icon: 'none'
				});	
			}
			//跳转打车页面
			else {
				uni.switchTab({
					url: '/pages/firstPage/firstPage?couponId=' + coupon.couponId,
				});
			}
			// 在这里添加购买优惠券的逻辑
		},
		// 切换标签
		// 获取所有限时抢购优惠券
		async getFlashSaleCoupons() {
			try {
				const res = await coupon.getFlashSaleCoupons();

				if (res && Array.isArray(res)) {
					// 假设后端返回的数组中每个对象的字段和期望的一致
					// 直接将后端返回的数组赋值给 this.flashSaleCoupons
					console.log(res, "123");
					this.flashSaleCoupons = res.map(item => ({
						seckillId: item.seckillId,
						couponId: item.couponId,
						type: item.couponType,
						discount: item.discountRate,
						minAmount: item.minAmount,
						deductAmount: item.deductAmount,
						name: item.couponName,
						condition: item.applicableIds,
						limit: item.limitNum,
						// originalPrice: 19.9,
						// price: 9.9,
						soldOut: false,
						isLoading: false, // 控制按钮加载状态
						isDisabled: false, // 控制按钮禁用状态
						buttonText: '立即领取', // 按钮文本
					}));

					console.log(this.flashSaleCoupons, "12----3");
				}
			}	
			catch (error) {
				console.error('获取限时抢购优惠券失败:', error);	
			}
		},
		// 获取普通优惠券列表
		async getNormalCoupons() {
			try {
				const res = await coupon.getNormalCoupons();
				console.log(res, "1233--12345------6789");
				if (res && Array.isArray(res)) {
					this.normalCoupons = res.map(item => ({
						templateId: item.templateId,
						type: item.couponType,
						discount: item.discountRate,
						minAmount: item.minAmount,
						deductAmount: item.deductAmount,
						name: item.couponName,
						description: item.applicableIds,
						minAmount: item.minAmount,
						deductAmount: item.deductAmount,
						//时间格式转换
						expireTime: this.formatDate(item.validDays),
						// expireTime: item.expireTime,
						limit: item.limitNum,
						// originalPrice: 19.9,
						// price: 9.9,
						soldOut: false,
					}))	
				}
			} catch (error) {
				console.error('获取普通优惠券失败:', error);
			}
		},
		// 获取我的优惠券
		async getMyCoupons() {
			try {
				const res = await coupon.getMyCoupons();
				console.log(res, "1233--123456789");
				if (res && Array.isArray(res)) {
					this.myCoupons = res.map(item => ({
						couponId: item.couponId,
						type: item.couponType,
						discount: item.discountRate,
						minAmount: item.minAmount,
						deductAmount: item.deductAmount,
						name: item.couponName,
						description: item.applicableIds,
						//时间格式转换
						expireTime: new Date(item.expireTime).toLocaleDateString(),
						// expireTime: item.expireTime,
						limit: item.limitNum,
						status: item.status,
						// originalPrice: 19.9,
						// price: 9.9,
						soldOut: false
					}));
				}
			} catch (error) {
				console.error('获取我的优惠券失败:', error);
			}
		},
		// 处理底部导航切换
		handleNavChange(index) {
			console.log(index, "1233");
		
			const list = this.bottomNavList;
		
			if (!Array.isArray(list)) {
				console.error('bottomNavList 不是数组');
				return;
			}
		
			if (index == null || isNaN(index) || index < 0 || index >= list.length) {
				console.error('无效的索引:', index);
				return;
			}
		
			const item = list[index];
			if (!item || !item.path) {
				console.error('无效的导航项:', item);
				return;
			}
		
			const targetPath = item.path;
			if (targetPath !== this.$route?.path) {
				uni.navigateTo({
					url: targetPath,
					success: () => {
						console.log('底部导航跳转成功:', targetPath);
					},
					fail: (err) => {
						console.error('底部导航跳转失败:', targetPath, err);
						uni.showToast({
							title: '跳转失败',
							icon: 'none'
						});
					}
				});
			}
		},
		//路由跳转
		goToPath(url) {
		  // 参数校验
		  if (!url || typeof url !== 'string') {
		    console.error('路由跳转失败：url参数为空或类型错误', url);
		    uni.showToast({
		      title: '跳转路径错误',
		      icon: 'none'
		    });
		    return;
		  }
		  
		  // 执行路由跳转
		  uni.navigateTo({
		    url,
		    success: () => {
		      console.log('路由跳转成功:', url);
		    },
		    fail: (err) => {
		      console.error('路由跳转失败:', url, err);
		      uni.showToast({
		        title: '跳转失败，请稍后再试',
		        icon: 'none'
		      });
		    },
		    complete: () => {
		      // 跳转完成后的通用处理
		    }
		  });
		},
		// 切换标签
		switchTab(index) {
			this.currentTab = index;
			// 当切换到"限时抢购"标签时，重新获取优惠券数据
			if (index === 0) {
				this.getFlashSaleCoupons();	
			}
			// 当切换到"优惠券"标签时，重新获取优惠券数据
			if (index === 1) {
				this.getNormalCoupons();	
			}
			// 当切换到"我的优惠券"标签时，重新获取优惠券数据
			if (index === 2) {
				this.getMyCoupons();
			}
		},
		
		// 处理限时抢购
		async handleFlashSale(data) {
			// 全局防抖检查
			if (this.isProcessing) {
				uni.showToast({
					title: '操作太频繁，请稍后再试',
					icon: 'none'
				});
				return;
			}
			
			// 单个优惠券防抖检查
			if (data.isDisabled || data.isLoading) {
				uni.showToast({
					title: '请稍后再试',
					icon: 'none'
				});
				return;
			}
			
			// 设置全局处理状态
			this.isProcessing = true;
			
			// 设置防抖状态
			data.isDisabled = true;
			data.isLoading = true;
			data.buttonText = '抢购中...';
			
			// 设置防抖计时器
			if (this.clickTimer[data.couponId]) {
				clearTimeout(this.clickTimer[data.couponId]);
			}
			
			// 创建防抖计时器
			this.clickTimer[data.couponId] = setTimeout(() => {
				if (!data.soldOut) {
					this.resetButtonState(data);
				}
				// 重置全局处理状态
				this.isProcessing = false;
			}, this.debounceTime);
			
			// 检查优惠券是否已售罄
			if (data.limit === 0) {
				uni.showToast({
					title: '优惠券已售罄',
					icon: 'none'
				});
				// 重置状态
				this.resetButtonState(data);
				this.isProcessing = false;
				return;
			}
			
			try {
				uni.showLoading({ title: '抢购中...' });
				const response = await coupon.seckillCoupon(data);
				
				if (response) {
					uni.showToast({
						title: '抢购成功',
						icon: 'success'
					});
					// 抢购成功后更新状态
					data.soldOut = true;
					data.buttonText = '已抢购';
					// 保持禁用状态
					data.isDisabled = true;
					data.isLoading = false;
					// 清除计时器
					if (this.clickTimer[data.couponId]) {
						clearTimeout(this.clickTimer[data.couponId]);
					}
				} else {
					// 抢购失败时重置状态
					this.resetButtonState(data);
					uni.showToast({
						title: '抢购失败',
						icon: 'error'
					});
				}
			} catch (error) {
				console.error('抢购出错:', error);
				// 发生错误时重置状态
				this.resetButtonState(data);
				uni.showToast({
					title: error || '抢购失败',
					icon: 'error'
				});
			} finally {
				uni.hideLoading();
				// 重置全局处理状态
				this.isProcessing = false;
			}
		},
		
		// 处理购买优惠券
		async handleBuyCoupon(data) {
			// 全局防抖检查
			if (this.isProcessing) {
				uni.showToast({
					title: '操作太频繁，请稍后再试',
					icon: 'none'
				});
				return;
			}
			
			// 单个优惠券防抖检查
			if (data.isDisabled || data.isLoading) {
				uni.showToast({
					title: '请稍后再试',
					icon: 'none'
				});
				return;
			}
			
			// 设置全局处理状态
			this.isProcessing = true;
			
			// 设置防抖状态
			data.isDisabled = true;
			data.isLoading = true;
			data.buttonText = '领取中...';
			
			// 设置防抖计时器
			if (this.clickTimer[data.templateId]) {
				clearTimeout(this.clickTimer[data.templateId]);
			}
			
			// 创建防抖计时器
			this.clickTimer[data.templateId] = setTimeout(() => {
				if (!data.soldOut) {
					this.resetButtonState(data);
				}
				// 重置全局处理状态
				this.isProcessing = false;
			}, this.debounceTime);
			
			try {
				uni.showLoading({ title: '领取中...' });
				console.log(data, "1234----56789");
				const res = await coupon.getCoupon(data);
				console.log(res, "1234-5-6789");
				
				if (res) {
					uni.showToast({
						title: '领取成功',
						icon: 'success'
					});
					// 领取成功后更新状态
					data.soldOut = true;
					data.buttonText = '已领取';
					// 保持禁用状态
					data.isDisabled = true;
					data.isLoading = false;
					// 清除计时器
					if (this.clickTimer[data.templateId]) {
						clearTimeout(this.clickTimer[data.templateId]);
					}
				} else {
					// 领取失败时重置状态
					this.resetButtonState(data);
					uni.showToast({
						title: '领取失败',
						icon: 'error'
					});
				}
			} catch (error) {
				// 发生错误时重置状态
				this.resetButtonState(data);
				uni.showToast({
					title: error || '领取失败',
					icon: 'error'
				});
			} finally {
				uni.hideLoading();
				// 重置全局处理状态
				this.isProcessing = false;
			}
		},
		
		// 重置按钮状态的方法
		resetButtonState(data) {
			data.isDisabled = false;
			data.isLoading = false;
			data.buttonText = '立即领取';
		},
		
		// 更新倒计时
		updateCountdown() {
			// 每天的早上9点到晚上9点进行限时抢购
			const now = new Date();
			const start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 9, 0, 0);
			const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 21, 0, 0);
			let remainingTime = end - now;
			if (now < start) {
				// 未到抢购时间，设置为2小时
				remainingTime = 2 * 60 * 60 * 1000;	
			}
			if (now > end) {
				// 已过抢购时间，设置为0
				remainingTime = 0;	
			}
			const hours = Math.floor(remainingTime / (1000 * 60 * 60));
			const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
			const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
			this.countdown = {
				hours: hours.toString().padStart(2, '0'),
				minutes: minutes.toString().padStart(2, '0'),
				seconds: seconds.toString().padStart(2, '0')	
			}
			// 每秒更新倒计时
			setTimeout(() => {
				this.updateCountdown();
			}, 1000);
		},
		// 在组件销毁时清理定时器
		beforeDestroy() {
			// 清理所有定时器
			Object.values(this.clickTimer).forEach(timer => {
				clearTimeout(timer);
			});
			// 重置全局处理状态
			this.isProcessing = false;
		}
	}
}
</script>

<style>
.coupon-center {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx; /* 添加底部内边距，为底部导航栏预留空间 */
	box-sizing: border-box;
}

/* 轮播图样式 */
.banner-swiper {
	height: 300rpx;
}

.banner-image {
	width: 100%;
	height: 100%;
}

/* 标签页样式 */
.coupon-tabs {
	display: flex;
	background-color: #ffffff;
	padding: 20rpx 0;
	margin-bottom: 20rpx;
	position: sticky;
	top: 0;
	z-index: 100;
}

.tab-item {
	flex: 1;
	text-align: center;
	font-size: 28rpx;
	color: #666;
	position: relative;
	padding: 20rpx 0;
}

.tab-item.active {
	color: #007AFF;
	font-weight: bold;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background-color: #007AFF;
	border-radius: 2rpx;
}

/* 限时抢购样式 */
.flash-sale {
	background-color: #ffffff;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.section-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.title-text {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.countdown {
	display: flex;
	align-items: center;
	font-size: 24rpx;
	color: #666;
}

.time-block {
	background-color: #ff6b6b;
	color: #ffffff;
	padding: 4rpx 8rpx;
	border-radius: 4rpx;
	margin: 0 4rpx;
}

.flash-sale-scroll {
	white-space: nowrap;
}

.flash-sale-list {
	display: inline-flex;
	padding: 10rpx 0;
}

.flash-sale-item {
	width: 300rpx;
	background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
	border-radius: 12rpx;
	margin-right: 20rpx;
	padding: 20rpx;
	color: #ffffff;
	display: inline-block;
}

.flash-sale-content {
	margin-bottom: 20rpx;
}

.discount-info {
	text-align: center;
	margin-bottom: 20rpx;
}

.discount-type {
	font-size: 24rpx;
	opacity: 0.8;
}

.discount-value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	margin-top: 10rpx;
}

.discount-value .value {
	font-size: 48rpx;
	font-weight: bold;
}

.discount-value .unit {
	font-size: 24rpx;
	margin-left: 4rpx;
}

.discount-value .currency {
	font-size: 24rpx;
	margin-right: 4rpx;
}

.coupon-info {
	text-align: center;
}

.coupon-name {
	font-size: 28rpx;
	margin-bottom: 8rpx;
	display: block;
}

.coupon-condition {
	font-size: 24rpx;
	opacity: 0.8;
	margin-bottom: 8rpx;
	display: block;
}

.coupon-limit {
	font-size: 24rpx;
	opacity: 0.8;
	display: block;
}

.price-info {
	text-align: center;
	margin-top: 20rpx;
}

.original-price {
	font-size: 24rpx;
	text-decoration: line-through;
	opacity: 0.8;
	margin-right: 10rpx;
}

.current-price {
	font-size: 32rpx;
	font-weight: bold;
}

.buy-btn {
	width: 100%;
	height: 60rpx;
	line-height: 60rpx;
	background-color: #ffffff;
	color: #ff6b6b;
	font-size: 26rpx;
	border-radius: 30rpx;
	margin-top: 20rpx;
}

.buy-btn.sold-out {
	background-color: #cccccc;
	color: #ffffff;
}

/* 优惠券列表样式 */
.coupon-list, .my-coupons {
	padding: 20rpx;
	padding-bottom: 40rpx; /* 增加底部内边距 */
}

.coupon-item {
	display: flex;
	background-color: #ffffff;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
	position: relative; /* 添加相对定位 */
}

.coupon-left {
	width: 200rpx;
	background: linear-gradient(135deg, #007AFF, #00BFFF);
	padding: 30rpx 20rpx;
	color: #ffffff;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.coupon-type {
	font-size: 24rpx;
	opacity: 0.8;
	margin-bottom: 10rpx;
}

.coupon-value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	margin-bottom: 10rpx;
}

.coupon-value .value {
	font-size: 48rpx;
	font-weight: bold;
}

.coupon-value .unit {
	font-size: 24rpx;
	margin-left: 4rpx;
}

.coupon-value .currency {
	font-size: 24rpx;
	margin-right: 4rpx;
}

.coupon-condition {
	font-size: 24rpx;
	opacity: 0.8;
}

.coupon-right {
	flex: 1;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.coupon-info {
	flex: 1;
}

.coupon-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
}

.coupon-desc {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 10rpx;
	display: block;
}

.coupon-time {
	font-size: 24rpx;
	color: #999;
	display: block;
}

.coupon-price {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20rpx;
}

.price {
	font-size: 36rpx;
	color: #ff6b6b;
	font-weight: bold;
}

.coupon-status {
	text-align: right;
}

.status-text {
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.status-text.valid {
	color: #4CAF50;
	background-color: rgba(76, 175, 80, 0.1);
}

.status-text.expired {
	color: #999;
	background-color: rgba(153, 153, 153, 0.1);
}

.status-text.used {
	color: #ff6b6b;
	background-color: rgba(255, 107, 107, 0.1);
}

.coupon-item.expired {
	opacity: 0.6;
}

/* 添加一些动画效果 */
.coupon-item, .flash-sale-item {
	animation: slideIn 0.3s ease;
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 底部导航样式调整 */
.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: #ffffff;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}
</style>
